<script setup>

import {ref, toRefs} from "vue";
import {updateEntity} from "./api/EntityApi.js";
import {validateForm} from "../../components/EntityOperate.js";
import EditPageList from "./EditPageList.vue";

const basePath = import.meta.env.VITE_BACKEND_BASE_URL;


let props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: {}
  },
})

// 定义更新函数
const emit = defineEmits(['update:dialogVisible','update:form', 'refresh'])

let {dialogVisible, form} = toRefs(props);

let isSubmitDisabled = ref(true)

//编辑
const update = () => {
  updateEntity(form.value.id, form.value).then(() => {
  })
}

const cancel = () => {
  emit('update:dialogVisible', false)
  emit('update:form', {})
  emit('refresh');
};

const validate = () => {
  validateForm(formRef, isSubmitDisabled);
}
</script>

<template>
  <!--弹窗-修改-->
  <el-dialog v-model="dialogVisible" title="请求参数设置" width="40%" @close="cancel">
    <div class="dialog-header">
      <div>{{ form.namespace }} / {{ form.name }}（{{ form.description }}）</div>
      <div>{{ form.reqType }} {{ basePath }}{{ form.reqUrl }}</div>
    </div>
    <el-tabs type="card">
      <el-tab-pane label="Header">
        <EditPageList v-model:form="form.reqHeaderList" @saveAll="update"></EditPageList>
      </el-tab-pane>

      <el-tab-pane label="Body">
        <EditPageList v-model:form="form.reqBodyList" @saveAll="update"></EditPageList>
      </el-tab-pane>
    </el-tabs>
    <!--    <template #footer>-->
    <!--      <span class="dialog-footer">-->
    <!--        <el-button @click="cancel">取消</el-button>-->
    <!--        <el-button type="primary" @click="update" :disabled="isSubmitDisabled">确认</el-button>-->
    <!--      </span>-->
    <!--    </template>-->
  </el-dialog>
</template>

<style scoped>
.dialog-header {
  text-align: left; /* 使内容靠左 */
  margin-bottom: 16px; /* 增加下边缘间距，可以根据需要调整数值 */
}

.dialog-header div {
  font-weight: bold; /* 加粗文本 */
  margin-bottom: 16px; /* 增加下边缘间距，可以根据需要调整数值 */
}
</style>